<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button
          class="bg"
          size="mini"
          type="info"
          @click="isEditing = !isEditing"
          >{{ isEditing ? "取消" : "编辑" }}</van-button
        >
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(channel, idx) in channels"
          :class="{ red: idx === curIndex }"
          :key="channel.id"
          @click="hClickMyChannel(idx)"
        >
          <span>{{ channel.name }}</span>
          <van-icon
            name="cross"
            class="btn"
            v-show="isEditing && idx !== 0"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          v-for="channel in recommendChannels"
          :key="channel.id"
          @click="hAddChannel(channel)"
        >
          <span>{{ channel.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannels, delChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  props: ['channels', 'curIndex'],
  data () {
    return {
      allChannels: [],
      isEditing: false // 是否处于编辑状态
    }
  },
  created () {
    this.loadAllChannels()
  },
  methods: {
    async loadAllChannels () {
      const res = await getAllChannels()
      this.allChannels = res.data.data.channels
    },
    // 用户点击了我的频道，要做频道跳转，通知父组件
    // 用户在我的频道区域，点击了某一个频道
    hClickMyChannel (idx) {
      // 用户在我的频道区域，点击了某一个频道
      // 1. 正常情况：点了之后，做频道跳转
      // 2. 编辑状态: 点了之后，做频道删除
      if (this.isEditing) {
        // 做删除
        this.doDeleteChannel(idx)
      } else {
        this.$emit('change-channel', idx)
      }
    },
    // 用户在可选的频道区域，点击了某一个频道，做增加
    async hAddChannel (channel) {
      try {
        // 1. 调用接口
        await addChannels([channel])
        // 2. 更新视图
        this.channels.push(channel)
        this.$toast.success('添加频道成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('添加频道失败')
      }
    },
    async doDeleteChannel (idx) {
      // 1. 根据下标找到id
      const channelId = this.channels[idx].id
      // 2. 做删除
      try {
        await delChannel(channelId)
        if (idx < this.curIndex) {
          this.$emit('fixed-active-index')
        }
        // 我的频道 少1项， 删除当前项(判断当前id不能为0的项可以删除，推荐不允许删除)
        if (idx !== 0) {
          this.channels.splice(idx, 1)
          this.$toast.success('删除成功')
        }
      } catch (err) {
        console.log(err)
      }
    }
  },
  computed: {
    recommendChannels () {
      return this.allChannels.filter((item) => !this.channels.some(index => Number(index.id) === item.id))
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
.red {
  color: red;
  font-weight: bold;
}
.bg {
  background-color: #fff;
  color: red;
  border-color: red;
}
</style>
